<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>手机端选项卡</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            background-color: rgba(155, 89, 182, 0.7);
            font-family: "Open Sans", sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        
        .phone {
            position: relative;
            overflow: hidden;
            border: 3px solid #eee;
            border-radius: 15px;
            height: 600px;
            width: 340px;
        }
        
        .phone .content {
            opacity: 0;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            height: calc(100% - 60px);
            width: 100%;
            transition: opacity 0.4s ease;
        }
        
        .phone .content.show {
            opacity: 1;
        }
        
        nav {
            position: absolute;
            bottom: 0;
            left: 0;
            margin-top: -5px;
            width: 100%;
        }
        
        nav ul {
            background-color: #fff;
            display: flex;
            list-style-type: none;
            padding: 0;
            margin: 0;
            height: 60px;
        }
        
        nav li {
            color: #777;
            cursor: pointer;
            flex: 1;
            padding: 10px;
            text-align: center;
        }
        
        nav ul li p {
            font-size: 12px;
            margin: 2px 0;
        }
        
        nav ul li:hover,
        nav ul li.active {
            color: #8e44ad;
        }
    </style>
</head>

<body>
    <div class="phone">
        <img src="./images/home.jpeg" alt="home" class="content show" />
        <img src="./images/work.jpeg" alt="work" class="content" />
        <img src="./images/blog.jpeg" alt="blog" class="content" />
        <img src="./images/about.jpeg" alt="about" class="content" />
        <nav>
            <ul>
                <li class="active">
                    <i class="fas fa-home"></i>
                    <p>Home</p>
                </li>
                <li>
                    <i class="fas fa-box"></i>
                    <p>Work</p>
                </li>
                <li>
                    <i class="fas fa-book-open"></i>
                    <p>Blog</p>
                </li>
                <li>
                    <i class="fas fa-users"></i>
                    <p>About Us</p>
                </li>
            </ul>
        </nav>
    </div>
    <script>
        // 第一步：获取元素
        // 获取所有类名为content的元素                          
        // 获取所有li                                                                                                                                                                                                                                */
        /* 
        第二步：遍历li添加点击后处理的事件函数
        1.移除所有content内容和导航栏按钮的show和active效果
        2.给点击到的li和对应的上方content内容区域添加对应的show和active效果
        添加点击事件的方法为
        node.addEventListener("click", function () {
            要执行的操作
          });
        */
        // 获取所有类名为content的元素 
        var contents = document.querySelectorAll('.content');
        // 获取所有
        var lis = document.querySelectorAll('li')
            // console.log(lis); // NodeList(4) [li.active, li, li, li]0: li.active 1: li2: li 3: li  length: 4 [[Prototype]]: NodeList
            // console.log(contents); // NodeList(4) [img.content.show, img.content, img.content, img.content]
        for (let i = 0; i < lis.length; i++) {
            // 为每个li加个点击事件
            lis[i].addEventListener('click', function() {
                hideAllContents();
                hideAllItems();
                this.classList.add('active');
                contents[i].classList.add('show'); // 内容同时改变
            })
        }
        // //移除所有content的show效果
        function hideAllContents() {
            document.querySelector('.show').classList.remove('show');
        };
        // //移除所有item的active效果
        function hideAllItems() {
            document.querySelector('.active').classList.remove('active');
        };
    </script>
</body>

</html>